/* Generated by less 2.5.1 */


/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #333;
}

html {
    font-size: 1em;
    font-family: "proxima-nova", "Open Sans", sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    line-height: 1.4;
}

html,
body {
    box-sizing: border-box;
    height: 100%;
    text-rendering: optimizeLegibility;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

section {
    position: relative;
    box-sizing: border-box;
    padding: 3em 0;
    margin: 0 auto;
}

#aspnetForm {
    min-height: 93%;
    position: relative;
}


/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

#landing {
    height: 100%;
    background: #f0f2f3;
    padding-top: 5em;
}

#map {
    position: relative;
    height: 350px;
}

#map-showcase {
    width: 95%;
    height: auto;
    border: 2px solid #BDBDBD;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 2em 0;
}

.map-container {
    overflow-y: hidden;
}

.solid-separator {
    background-image: url(../img/separator.svg);
    width: 150px;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 35px);
    -moz-transform: translate(-50%, 35px);
    -ms-transform: translate(-50%, 35px);
    -o-transform: translate(-50%, 35px);
    transform: translate(-50%, 35px);
}

.dot-separator {
    background-image: url(../img/dot-separator.svg);
    width: 50px;
    height: 8px;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 50%);
    -moz-transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, 50%);
    -o-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
}

.feature-description {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
}

.feature-description h3 {
    margin-top: .5em;
}

.feature-description img {
    padding-top: .5em;
    padding-bottom: .5em;
}

.row p {
    text-align: left;
}

body,
#aspnetForm {
    background: #fcfcfc;
}

footer {
    background: #232323;
}

body > header {
    position: fixed;
    z-index: 110;
    background: #FFFFFF;
    height: 3em;
    width: 100%;
    top: 0;
}

#site-logo {
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

#site-logo div {
    background-image: url(../img/logo.svg);
    height: 1.5em;
    width: 10em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#site-logo a {
    display: block;
}

.school-logo {
    width: 14em;
    position: absolute;
    bottom: 1.5em;
    right: 1.5em;
}

footer .title.logo {
    background-image: url(../img/logo-vector2-revised-bw.svg);
    height: 31px;
    width: 169px;
}

video {
    width: 95%;
    height: auto;
    border: 2px solid #BDBDBD;
    border-radius: 4px;
    box-sizing: border-box;
}

nav #menu-button-container {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    padding: 1em 1em 2em 1em;
}

nav #menu-button,
nav #menu-button::before,
nav #menu-button::after {
    height: .25em;
    max-height: .25em;
    width: 2.0em;
    top: .5em;
    background: #616161;
    position: relative;
    display: block;
    -webkit-transition: 0.25s all;
    -moz-transition: 0.25s all;
    -ms-transition: 0.25s all;
    -o-transition: 0.25s all;
    transition: 0.25s all;
    -webkit-transform-origin: 54%;
    -moz-transform-origin: 54%;
    -ms-transform-origin: 54%;
    -o-transform-origin: 54%;
    transform-origin: 54%;
    border-radius: 3px;
    box-sizing: border-box;
    z-index: 3;
    outline: 1px solid transparent;
}

nav #menu-button::before {
    content: '';
    top: -0.55em;
}

nav #menu-button::after {
    content: '';
    top: .35em;
}

nav #menu-button.active,
nav #menu-button.active.deactivate {
    -webkit-animation: disappear 0.3s forwards;
    -moz-animation: disappear 0.3s forwards;
    -o-animation: disappear 0.3s forwards;
    animation: disappear 0.3s forwards;
}

nav #menu-button.active::before,
nav #menu-button.active.deactivate::before {
    -webkit-animation: topBarAnimIn 0.3s forwards;
    -moz-animation: topBarAnimIn 0.3s forwards;
    -o-animation: topBarAnimIn 0.3s forwards;
    animation: topBarAnimIn 0.3s forwards;
}

nav #menu-button.active::after,
nav #menu-button.active.deactivate::after {
    -webkit-animation: bottomBarAnimIn 0.3s forwards;
    -moz-animation: bottomBarAnimIn 0.3s forwards;
    -o-animation: bottomBarAnimIn 0.3s forwards;
    animation: bottomBarAnimIn 0.3s forwards;
}

nav #menu-button.deactivate {
    -webkit-animation: appear 0.3s forwards;
    -moz-animation: appear 0.3s forwards;
    -o-animation: appear 0.3s forwards;
    animation: appear 0.3s forwards;
}

nav #menu-button.deactivate::before {
    content: '';
    top: -0.55em;
    -webkit-animation: topBarAnimOut 0.3s forwards;
    -moz-animation: topBarAnimOut 0.3s forwards;
    -o-animation: topBarAnimOut 0.3s forwards;
    animation: topBarAnimOut 0.3s forwards;
}

nav #menu-button.deactivate::after {
    content: '';
    top: .35em;
    -webkit-animation: bottomBarAnimOut 0.3s forwards;
    -moz-animation: bottomBarAnimOut 0.3s forwards;
    -o-animation: bottomBarAnimOut 0.3s forwards;
    animation: bottomBarAnimOut 0.3s forwards;
}

@-webkit-keyframes disappear {
    100% {
        background: transparent;
    }
}

@keyframes disappear {
    100% {
        background: transparent;
    }
}

@-webkit-keyframes topBarAnimIn {
    50% {
        -webkit-transform: translate3d(0, 0.55em, 0) rotate(0);
        -moz-transform: translate3d(0, 0.55em, 0) rotate(0);
        -ms-transform: translate3d(0, 0.55em, 0) rotate(0);
        -o-transform: translate3d(0, 0.55em, 0) rotate(0);
        transform: translate3d(0, 0.55em, 0) rotate(0);
    }
    100% {
        -webkit-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        -moz-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        -ms-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        -o-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        transform: translate3d(0, 0.55em, 0) rotate(-45deg);
    }
}

@keyframes topBarAnimIn {
    50% {
        -webkit-transform: translate3d(0, 0.55em, 0) rotate(0);
        -moz-transform: translate3d(0, 0.55em, 0) rotate(0);
        -ms-transform: translate3d(0, 0.55em, 0) rotate(0);
        -o-transform: translate3d(0, 0.55em, 0) rotate(0);
        transform: translate3d(0, 0.55em, 0) rotate(0);
    }
    100% {
        -webkit-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        -moz-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        -ms-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        -o-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        transform: translate3d(0, 0.55em, 0) rotate(-45deg);
    }
}

@-webkit-keyframes bottomBarAnimIn {
    50% {
        -webkit-transform: translate3d(0, -0.55em, 0) rotate(0);
        -moz-transform: translate3d(0, -0.55em, 0) rotate(0);
        -ms-transform: translate3d(0, -0.55em, 0) rotate(0);
        -o-transform: translate3d(0, -0.55em, 0) rotate(0);
        transform: translate3d(0, -0.55em, 0) rotate(0);
    }
    100% {
        -webkit-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        -moz-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        -ms-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        -o-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        transform: translate3d(0, -0.55em, 0) rotate(45deg);
    }
}

@keyframes bottomBarAnimIn {
    50% {
        -webkit-transform: translate3d(0, -0.55em, 0) rotate(0);
        -moz-transform: translate3d(0, -0.55em, 0) rotate(0);
        -ms-transform: translate3d(0, -0.55em, 0) rotate(0);
        -o-transform: translate3d(0, -0.55em, 0) rotate(0);
        transform: translate3d(0, -0.55em, 0) rotate(0);
    }
    100% {
        -webkit-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        -moz-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        -ms-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        -o-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        transform: translate3d(0, -0.55em, 0) rotate(45deg);
    }
}

@-webkit-keyframes appear {
    0% {
        background: transparent;
    }
    100% {
        background: #616161;
    }
}

@keyframes appear {
    0% {
        background: transparent;
    }
    100% {
        background: #616161;
    }
}

@-webkit-keyframes topBarAnimOut {
    0% {
        -webkit-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        -moz-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        -ms-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        -o-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        transform: translate3d(0, 0.55em, 0) rotate(-45deg);
    }
    50% {
        -webkit-transform: translate3d(0, 0.55em, 0) rotate(0);
        -moz-transform: translate3d(0, 0.55em, 0) rotate(0);
        -ms-transform: translate3d(0, 0.55em, 0) rotate(0);
        -o-transform: translate3d(0, 0.55em, 0) rotate(0);
        transform: translate3d(0, 0.55em, 0) rotate(0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) rotate(0);
        -moz-transform: translate3d(0, 0, 0) rotate(0);
        -ms-transform: translate3d(0, 0, 0) rotate(0);
        -o-transform: translate3d(0, 0, 0) rotate(0);
        transform: translate3d(0, 0, 0) rotate(0);
    }
}

@keyframes topBarAnimOut {
    0% {
        -webkit-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        -moz-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        -ms-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        -o-transform: translate3d(0, 0.55em, 0) rotate(-45deg);
        transform: translate3d(0, 0.55em, 0) rotate(-45deg);
    }
    50% {
        -webkit-transform: translate3d(0, 0.55em, 0) rotate(0);
        -moz-transform: translate3d(0, 0.55em, 0) rotate(0);
        -ms-transform: translate3d(0, 0.55em, 0) rotate(0);
        -o-transform: translate3d(0, 0.55em, 0) rotate(0);
        transform: translate3d(0, 0.55em, 0) rotate(0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) rotate(0);
        -moz-transform: translate3d(0, 0, 0) rotate(0);
        -ms-transform: translate3d(0, 0, 0) rotate(0);
        -o-transform: translate3d(0, 0, 0) rotate(0);
        transform: translate3d(0, 0, 0) rotate(0);
    }
}

@-webkit-keyframes bottomBarAnimOut {
    0% {
        -webkit-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        -moz-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        -ms-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        -o-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        transform: translate3d(0, -0.55em, 0) rotate(45deg);
    }
    50% {
        -webkit-transform: translate3d(0, -0.55em, 0) rotate(0);
        -moz-transform: translate3d(0, -0.55em, 0) rotate(0);
        -ms-transform: translate3d(0, -0.55em, 0) rotate(0);
        -o-transform: translate3d(0, -0.55em, 0) rotate(0);
        transform: translate3d(0, -0.55em, 0) rotate(0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) rotate(0);
        -moz-transform: translate3d(0, 0, 0) rotate(0);
        -ms-transform: translate3d(0, 0, 0) rotate(0);
        -o-transform: translate3d(0, 0, 0) rotate(0);
        transform: translate3d(0, 0, 0) rotate(0);
    }
}

@keyframes bottomBarAnimOut {
    0% {
        -webkit-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        -moz-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        -ms-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        -o-transform: translate3d(0, -0.55em, 0) rotate(45deg);
        transform: translate3d(0, -0.55em, 0) rotate(45deg);
    }
    50% {
        -webkit-transform: translate3d(0, -0.55em, 0) rotate(0);
        -moz-transform: translate3d(0, -0.55em, 0) rotate(0);
        -ms-transform: translate3d(0, -0.55em, 0) rotate(0);
        -o-transform: translate3d(0, -0.55em, 0) rotate(0);
        transform: translate3d(0, -0.55em, 0) rotate(0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) rotate(0);
        -moz-transform: translate3d(0, 0, 0) rotate(0);
        -ms-transform: translate3d(0, 0, 0) rotate(0);
        -o-transform: translate3d(0, 0, 0) rotate(0);
        transform: translate3d(0, 0, 0) rotate(0);
    }
}

nav#main-menu {
    position: relative;
    height: 3em;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

nav#main-menu li {
    display: inline-block;
    position: relative;
}

nav#main-menu a:not(#main-logo-container) {
    text-decoration: none;
    text-align: center;
    font-size: 1.2em;
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .75em;
    padding-right: .75em;
    font-weight: 300;
    color: #9e9e9e;
    display: block;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}

nav#main-menu > ul {
    display: inline-block;
    position: relative;
    float: right;
}

nav#off-canvas-menu {
    background: #F5F5F5;
    position: fixed;
    z-index: 110;
    right: -22em;
    top: 3em;
    height: 100%;
    width: 22em;
    color: #333;
    text-align: left;
    font-weight: 400;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all 0.35s cubic-bezier(0.25, 0, 0.25, 1.2);
    -moz-transition: all 0.35s cubic-bezier(0.25, 0, 0.25, 1.2);
    -ms-transition: all 0.35s cubic-bezier(0.25, 0, 0.25, 1.2);
    -o-transition: all 0.35s cubic-bezier(0.25, 0, 0.25, 1.2);
    transition: all 0.35s cubic-bezier(0.25, 0, 0.25, 1.2);
}

nav#off-canvas-menu.active {
    -webkit-transform: translate3d(-21em, 0, 0);
    -moz-transform: translate3d(-21em, 0, 0);
    -ms-transform: translate3d(-21em, 0, 0);
    -o-transform: translate3d(-21em, 0, 0);
    transform: translate3d(-21em, 0, 0);
}

nav#off-canvas-menu ul li {
    display: block;
    width: 100%;
    margin: 0 !important;
    position: relative;
    overflow: hidden;
    z-index: 0;
    padding-top: 0;
    padding-bottom: 0;
}

nav#off-canvas-menu > div:last-child ul li:last-child {
    border-bottom: none;
    margin-bottom: 3em!important;
}

nav#off-canvas-menu ul li a,
nav#off-canvas-menu ul li .divider-tag {
    color: inherit;
    text-align: inherit;
    width: 100%;
    display: block;
    padding: 1em 3.5em;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

nav#off-canvas-menu ul li .divider-tag {
    padding: .5em 3.5em;
    color: #9E9E9E;
}

nav#off-canvas-menu ul li .divider-tag:after {
    content: '';
    position: absolute;
    background: #E0E0E0;
    width: 80%;
    height: 1px;
    bottom: .25em;
    left: 2.5em;
}

nav#off-canvas-menu ul li a span {
    padding-right: .75em;
}

nav#off-canvas-menu li:hover {
    background: #9E9E9E;
    color: #FFFFFF;
}

nav#off-canvas-menu .nav-divider {
    font-size: 1em;
}

nav#off-canvas-menu .nav-divider:hover {
    background: initial;
    color: initial;
}

div.modal-container,
div.modal-add,
div.modal-init,
#info-modal > div {
    padding-top: 5em;
}

#info-modal {
    position: fixed;
    height: 100%;
    width: 100%;
    background: #fcfcfc;
    z-index: 100;
    bottom: -100%;
    left: 0;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
}

#info-modal.slide-in {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

#info-modal.slide-in .card {
    opacity: 0;
    -webkit-animation: fade-in 0.7s;
    -moz-animation: fade-in 0.7s;
    -o-animation: fade-in 0.7s;
    animation: fade-in 0.7s;
    -webkit-transform: translate3d(0, 10em, 0);
    -moz-transform: translate3d(0, 10em, 0);
    -ms-transform: translate3d(0, 10em, 0);
    -o-transform: translate3d(0, 10em, 0);
    transform: translate3d(0, 10em, 0);
    -webkit-animation-direction: forwards;
    animation-direction: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

#info-modal.slide-in .card.fade-out-left {
    -webkit-animation: fade-out-left 0.45s;
    -moz-animation: fade-out-left 0.45s;
    -o-animation: fade-out-left 0.45s;
    animation: fade-out-left 0.45s;
    -webkit-animation-direction: forwards;
    animation-direction: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

#info-modal.slide-in .card.fade-in-left {
    -webkit-animation: fade-in-left 0.45s;
    -moz-animation: fade-in-left 0.45s;
    -o-animation: fade-in-left 0.45s;
    animation: fade-in-left 0.45s;
    -webkit-animation-direction: forwards;
    animation-direction: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fade-out-left {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@-webkit-keyframes fade-in-left {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

#modal-bg {
    position: fixed;
    height: 100%;
    width: 100%;
    background: #0b0b0b;
    opacity: 0;
    z-index: 100;
    top: 0;
    left: 0;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -ms-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
}

#modal-bg.active {
    opacity: .3;
}

.modal-bg-open {
    overflow: hidden;
}

#close-help {
    position: absolute;
    top: 1em;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: .75em;
    color: #cccccc;
}

#modal-close-button-container {
    display: block;
    height: 2em;
    width: 2em;
    position: absolute;
    right: 2em;
    top: 2em;
    z-index: 9999;
}

#modal-close-button {
    background: url(../img/icons/ic_close_48px.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    display: block;
}

#card-close-button-container {
    display: none;
    height: 2em;
    width: 2em;
    position: absolute;
    right: 1em;
    top: 1em;
}

#info-card {
    position: absolute;
    display: block;
    top: 1em;
    right: 1em;
    margin: 0;
    padding: 1em;
    width: 400px;
    max-height: 54px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: max-height 0.5s;
    -moz-transition: max-height 0.5s;
    -ms-transition: max-height 0.5s;
    -o-transition: max-height 0.5s;
    transition: max-height 0.5s;
}

#info-card.active {
    max-height: 60%;
}

#info-card .card-list-item {
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

#info-card.active .card-list-item {
    opacity: 1;
}

a {
    text-decoration: none;
    color: #03a9f4;
}

h1,
h2,
h3,
h4 {
    font-weight: 300;
}

h1 {
    font-size: 3em;
}

h2 {
    font-size: 2.1em;
}

h3 {
    font-size: 1.75em;
}

h4 {
    font-size: 1.5em;
}

p,
li {
    font-size: 1.1em;
    padding-top: .5em;
    padding-bottom: .5em;
}

li {
    list-style-position: inside;
}

i {
    font-style: italic;
}

.main-content {
    margin: 0 auto;
    text-align: center;
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5 {
    text-align: center;
}

.main-content h2 {
    margin-bottom: .4em;
}

.main-content h3 {
    margin-bottom: .7em;
}

s .content-block {
    margin: 1em 0 1em 0;
}

.cv {
    margin-top: 2em;
    margin-left: 1em;
}

.cv p {
    padding: 0;
}

.main-footer {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    bottom: 0;
    padding: 1.5em 0;
}

.main-footer.two-part > div > div:first-child {
    float: left;
    text-align: left;
}

.main-footer.two-part > div > div:nth-child(2) {
    float: right;
    text-align: right;
}

.footer-section a,
.footer-section p {
    color: #9e9e9e;
    text-decoration: none;
    display: block;
    font-size: .1em;
}

.footer-section a:hover {
    text-decoration: underline;
}

.footer-links a,
.footer-copyright p {
    font-size: .75em !important;
    font-weight: normal;
    text-align: inherit;
}

.terms {
    font-size: .8em;
}

.fa.duration::before {
    color: #43BC9A;
}

.inline-link {
    padding: 0 .5em;
    color: #03a9f4;
    display: inline-block;
}

.bg-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.fancyLink {
    text-decoration: none !important;
    color: #03a9f4;
    position: relative;
}

.fancyLink:before {
    position: absolute;
    content: '';
    height: 1px;
    width: 0%;
    background: #03a9f4;
    top: 100%;
    left: 0;
    display: block;
    box-sizing: border-box;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
    -webkit-transform: traslate3d(0, 0, 0);
    -moz-transform: traslate3d(0, 0, 0);
    -ms-transform: traslate3d(0, 0, 0);
    -o-transform: traslate3d(0, 0, 0);
    transform: traslate3d(0, 0, 0);
}

.fancyLink:hover::before,
.fancyLink:focus::before {
    width: 100%;
}

#presenter-container {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
    padding: 2.5em 0;
}

.presenter-item {
    width: 350px;
    position: relative;
    box-sizing: border-box;
    height: 30em;
    background: #e0e0e0;
    margin: 1em;
    display: inline-block;
    box-shadow: 0 2px 5px #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.presenter-item:hover {
    cursor: pointer;
}

.presenter-profile {
    position: relative;
    width: 100%;
    height: 25.625em;
    background-size: cover;
    background-position: center;
}

.presenter-info {
    position: absolute;
    width: 100%;
    height: 4.375em;
    background: #FFF;
    bottom: 0;
    box-sizing: border-box;
    padding: 1.5em 1em;
    text-align: left;
    z-index: 100;
}

.presenter-description {
    position: absolute;
    box-sizing: border-box;
    bottom: 4.375em;
    width: 100%;
    z-index: 100;
    height: 25.625em;
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: translate3d(0, 25.625em, 0);
    -moz-transform: translate3d(0, 25.625em, 0);
    -ms-transform: translate3d(0, 25.625em, 0);
    -o-transform: translate3d(0, 25.625em, 0);
    transform: translate3d(0, 25.625em, 0);
}

.presenter-description > .content {
    height: 100%;
    width: 100%;
    padding: 1em 1em;
    box-sizing: border-box;
}

.presenter-description > .content h4 {
    margin-bottom: .5em;
}

.presenter-description > .content p {
    text-align: left;
    font-size: .9em;
}

.presenter-description.show {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.presenter-info p,
.presenter-info span {
    display: inline-block;
    position: relative;
}

.presenter-info span {
    position: absolute;
    right: 1.5em;
    top: 50%;
    color: #bdbdbd;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -ms-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
}

.presenter-item:hover .presenter-info > span {
    color: #757575;
}

#presenter-character {
    position: absolute;
    width: 275px;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.modal-open {
    overflow: hidden;
}

.card-backdrop {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    z-index: 100;
}

.action-container {
    position: fixed;
    bottom: 0em;
    right: .5em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 2em;
}

.action-container > .fab-container:nth-child(n+2) > .fab,
.action-container > .fab-container:nth-child(n+2) {
    height: 2.8em;
    width: 2.8em;
    opacity: 0;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.action-container:hover > .fab-container > .fab,
.action-container:hover > .fab-container {
    opacity: 1;
}

.action-container > .fab-container:nth-child(n+2) {
    margin: -0.5em 0em;
}

.action-container:hover > .fab-container:nth-child(n+2) {
    margin: .35em 0em;
}

.action-container:hover > .fab-container:nth-child(2) {
    transition-delay: 0s;
}

.action-container:hover > .fab-container:nth-child(3) {
    transition-delay: .03s;
}

.action-container:hover > .fab-container:nth-child(4) {
    transition-delay: .06s;
}

.action-container:hover > .fab-container:nth-child(5) {
    transition-delay: .09s;
}

.action-container:hover > .fab-container:nth-child(6) {
    transition-delay: .12s;
}

.action-container:hover > .fab-container:nth-child(7) {
    transition-delay: .125s;
}

.action-container:hover > .fab-container.tool-unavailable {
    transition-delay: 0s;
    margin: -2.5em 0;
    opacity: 0;
}

.fab-container {
    position: relative;
    margin: .35em 0em;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    backface-visibility: hidden;
    perspective: 1000;
}

.fab-container::after {
    content: attr(tooltip);
    position: absolute;
    top: 50%;
    left: -0.7em;
    padding: .65em 1.25em .65em 1.25em;
    border-radius: 2px;
    transform-origin: right;
    -webkit-transform: translate(-100%, -50%);
    -moz-transform: translate(-100%, -50%);
    -ms-transform: translate(-100%, -50%);
    -o-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -ms-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
    white-space: nowrap;
    height: auto;
    width: auto;
    background: #757575;
    color: #F5F5F5;
    font-weight: 300;
    font-size: .9em;
    opacity: 0;
    z-index: 9;
}

.fab-container.main-action {
    z-index: 100;
}

.fab-container:hover::after,
.fab-container.main-action.active:hover::after {
    opacity: 1;
}

.fab {
    height: 3.5em;
    width: 3.5em;
    border-radius: 50%;
    background: #E53935;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    z-index: 15;
}

.fab > span {
    height: 100%;
    width: 100%;
    border-radius: inherit;
    display: block;
    color: #333;
    position: relative;
    z-index: 0;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.fab.action {
    position: absolute;
    background: #4285f4;
    right: 0;
    top: 0;
    -webkit-mask-image: initial;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.fab:hover {
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
}

#fence {
    background: #43A047;
}

#point {
    background: #1E88E5;
}

#root.tool-active {
    background: #FF9800;
}

#root.tool-active span {
    -webkit-transform: rotate3d(0, 0, 1, -220deg);
    -moz-transform: rotate3d(0, 0, 1, -220deg);
    -ms-transform: rotate3d(0, 0, 1, -220deg);
    -o-transform: rotate3d(0, 0, 1, -220deg);
    transform: rotate3d(0, 0, 1, -220deg);
}

#root > span {
    background: url(http://edher.in/img/ic_add_48px.svg);
    background-size: 55%;
    background-repeat: no-repeat;
    background-position: center;
}

#point > span {
    background: url(http://edher.in/img/ic_place_48px.svg);
    background-size: 55%;
    background-repeat: no-repeat;
    background-position: center;
}

#fence > span {
    background: url(http://edher.in/img/ic_crop_square_48px.svg);
    background-size: 55%;
    background-repeat: no-repeat;
    background-position: center;
}

.ripple {
    position: absolute;
    height: .25em;
    width: .25em;
    opacity: 0;
    z-index: -100;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transition: opacity 0.8s;
    -moz-transition: opacity 0.8s;
    -ms-transition: opacity 0.8s;
    -o-transition: opacity 0.8s;
    transition: opacity 0.8s;
    -webkit-animation: balloon 0.8s;
    -moz-animation: balloon 0.8s;
    -o-animation: balloon 0.8s;
    animation: balloon 0.8s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal;
    animation-direction: normal;
}

.ripple-active {
    opacity: 1;
}

@-webkit-keyframes balloon {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -ms-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
    }
    33% {
        /*        opacity: 1;*/
    }
    50% {
        /*        opacity: 1;*/
    }
    75% {
        -webkit-transform: scale3d(50, 50, 50);
        -moz-transform: scale3d(50, 50, 50);
        -ms-transform: scale3d(50, 50, 50);
        -o-transform: scale3d(50, 50, 50);
        transform: scale3d(50, 50, 50);
    }
    100% {
        -webkit-transform: scale3d(50, 50, 50);
        -moz-transform: scale3d(50, 50, 50);
        -ms-transform: scale3d(50, 50, 50);
        -o-transform: scale3d(50, 50, 50);
        transform: scale3d(50, 50, 50);
    }
}

@keyframes balloon {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -ms-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
    }
    33% {
        /*        opacity: 1;*/
    }
    50% {
        /*        opacity: 1;*/
    }
    75% {
        -webkit-transform: scale3d(50, 50, 50);
        -moz-transform: scale3d(50, 50, 50);
        -ms-transform: scale3d(50, 50, 50);
        -o-transform: scale3d(50, 50, 50);
        transform: scale3d(50, 50, 50);
    }
    100% {
        -webkit-transform: scale3d(50, 50, 50);
        -moz-transform: scale3d(50, 50, 50);
        -ms-transform: scale3d(50, 50, 50);
        -o-transform: scale3d(50, 50, 50);
        transform: scale3d(50, 50, 50);
    }
}

.menu-divider {
    width: 90%;
    display: block;
    text-align: center;
    margin: 0 auto;
    position: relative;
}

.menu-divider > span {
    font-size: .8em;
    color: #757575;
}

.menu-divider > span::before {
    height: 1px;
    width: 45px;
    display: inline-block;
    top: -0.3em;
    position: relative;
    background: #e0e0e0;
    content: '';
    margin-right: .5em;
}

.menu-divider > span::after {
    height: 1px;
    width: 45px;
    display: inline-block;
    top: -0.3em;
    position: relative;
    background: #e0e0e0;
    content: '';
    margin-left: .5em;
}

.card {
    box-sizing: border-box;
    padding: 1em 1.5em;
    background: #FFFFFF;
    margin-top: 3em;
    margin-bottom: 3em;
    position: relative;
    z-index: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.card-list-item {
    margin: .75em 0;
    font-weight: 400;
}

.card-list-item p {
    padding: .1em;
}

.card-list-item p:last-child {
    color: #757575;
    font-size: .9em;
}

.card-list-item img {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}

.card > h1,
.card > h2,
.card > h3,
.card > h4,
.card > h5 {
    border-bottom: 1px solid #EEEEEE;
    margin-bottom: 1rem;
    padding-left: .25em;
    text-align: left;
}

.layerToggle {
    height: 26px;
    width: 26px;
    position: absolute;
    background: #fff;
    background-image: url(../img/Layers.svg);
    left: 10px;
    top: 13em;
    border-radius: 4px;
}

.layerToggle:hover {
    background-color: #f4f4f4;
}

.layers.card {
    position: absolute;
    top: 13em;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-transition: all 0.35s cubic-bezier(0.25, 0, 0.25, 1.2);
    -moz-transition: all 0.35s cubic-bezier(0.25, 0, 0.25, 1.2);
    -ms-transition: all 0.35s cubic-bezier(0.25, 0, 0.25, 1.2);
    -o-transition: all 0.35s cubic-bezier(0.25, 0, 0.25, 1.2);
    transition: all 0.35s cubic-bezier(0.25, 0, 0.25, 1.2);
}

.layers.card.active {
    -webkit-transform: translate3d(10px, 0, 0);
    -moz-transform: translate3d(10px, 0, 0);
    -ms-transform: translate3d(10px, 0, 0);
    -o-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
    overflow: scroll;
    height: 70%;
    margin-top: 1rem;
}

.layers.card .radio-group {
    display: block;
    font-size: 1em;
}

.layer-group {
    margin: 0 1em;
    position: relative;
}

.layer-group span {
    padding: 0 .4em .25em .1em;
    position: inherit;
    top: -0.15em;
}

.layer-group li {
    list-style: none;
}

.controls {
    display: block;
    position: relative;
    text-align: center;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.controls .form-input {
    margin: 0;
}

.controls select {
    padding: .5em .75em;
}

.controls > div {
    display: inline-block;
    position: inherit;
/*    padding: 0 1em;*/
    margin: 0 1em;
}

table {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1em !important;
}

table.css-count {
    content: submission-counter;
}

th {
    text-align: left;
    color: #9E9E9E;
    font-weight: 400;
}

td,
th {
    padding: .75em .325em !important;
    position: relative;
}

.clickableRow:hover {
    cursor: pointer;
}

tbody > tr:nth-child(2n) {
    background: #F5F5F5;
}

tbody > tr:hover {
    background: #E0E0E0;
}

tbody.flat > tr:hover,
tbody.flat > tr:nth-child(2n) {
    background: initial;
}

table.css-count tbody tr {
    counter-increment: submission-counter;
}

table.css-count tbody tr > td:first-child::before {
    content: counter(submission-counter);
}

td > span.delete {
    background: url(../img/icons/ic_close_48px.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1em;
    width: 1em;
    display: block;
    opacity: 0;
}

td .form-input {
    margin: .5em 0;
}

tr:hover td > span.delete {
    opacity: 1;
}

.toggleWrapper {
    position: relative;
}

#title-banner {
    box-sizing: border-box;
    padding: 1.2em 0;
}

#title-banner .subheading {
    color: #03A9F4;
    padding-top: 0;
}

#title-banner .subheading:hover {
    cursor: pointer;
    text-decoration: underline;
}

#sub-title-banner {
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    color: #616161;
    -webkit-transition: max-height 0.5s ease;
    -moz-transition: max-height 0.5s ease;
    -ms-transition: max-height 0.5s ease;
    -o-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
    background: #eeeeee;
}

#sub-title-banner > div {
    padding: 5em 0;
}

#sub-title-banner.expanded {
    max-height: 50em;
}

#sub-title-banner .terms {
    text-align: center;
}

#milestone-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 8em;
    padding-left: 8em;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

.milestone {
    position: relative;
    padding: 0 .75em;
}

.milestone img {
    height: 7em;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    position: inherit;
}

.milestone p {
    font-size: 1.2em;
    font-weight: 400;
}

.section-title {
    text-align: center;
    margin-top: .6em;
    margin-bottom: .6em;
}

.section-title-no-margin {
    text-align: center;
}

article {
    padding-top: 3em;
}

article header {
    text-align: left;
    margin-bottom: 2.5em;
}

article header p {
    font-style: italic;
    padding: .1em 0;
}

article header img {
    padding: 1em 0;
    width: 100%;
    background-size: cover;
}

article figcaption {
    font-style: italic;
    font-weight: 300;
}

article h2,
article h3,
article h4 {
    padding-bottom: .20em;
    margin-top: 1em;
}

article p,
article ul,
article ol,
article blockquote {
    padding-top: .5em;
    padding-bottom: .5em;
}

article p + ul,
article p + ol {
    padding-left: 2.5em;
}

article .content {
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .5px;
}

code {
    font-family: "Courier New", serif;
    background: #9e9e9e;
    color: #FFFFFF;
    border-radius: 3px;
    padding: 0 .25em;
    letter-spacing: 0;
    word-spacing: 0;
}

article blockquote {
    width: 95%;
    margin: 0 auto;
    display: block;
    font-weight: 300;
    font-style: italic;
}

article blockquote::before {
    content: '“';
    display: inline-block;
    padding-right: .25em;
}

article blockquote::after {
    content: '”';
    display: inline-block;
    padding-left: .25em;
}

article .shade {
    background: #90A4AE;
    box-sizing: border-box;
    margin-top: .5em;
    margin-bottom: .5em;
    padding: 1.25em;
    color: #FFFFFF;
    text-align: center;
}

article .row {
    margin-top: 20px;
}

article .card {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

article .card h3 {
    padding-top: 0;
    margin-top: 0;
}

section > header#section-links-container {
    background: #333;
}

nav#section-nav {
    box-sizing: border-box;
    margin: .5em 0;
}

nav#section-nav li {
    display: inline-block;
    margin: 0 !important;
}

nav#section-nav a {
    color: #BDBDBD;
    padding: .65em 1em;
    display: block;
    font-size: 1.1em;
    transition: all .15s;
}

nav#section-nav li {
    border-right: 1px solid #424242;
}

nav#section-nav li:last-child {
    border-right: none;
}

nav#section-nav a.active,
nav#section-nav a:hover {
    color: #FFFFFF;
}

.browser-wireframe-container {
    width: 85%;
    height: auto;
    border: 1px solid #BDBDBD;
    border-radius: 5px;
    position: relative;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    background: #E0E0E0;
}

.browser-wireframe-buttons-url-container {
    width: 100%;
}

.browser-wireframe-buttons {
    display: block;
    position: absolute;
    top: .15em;
    left: .15em;
}

.browser-wireframe-buttons span {
    display: inline-block;
    position: relative;
    height: .75em;
    width: .75em;
    background: #e0e0e0;
    border-radius: 50%;
    left: .5em;
    top: .1em;
}

.browser-wireframe-buttons span#button1 {
    background: #9E9E9E;
}

.browser-wireframe-buttons span#button2 {
    background: #9E9E9E;
}

.browser-wireframe-buttons span#button3 {
    background: #9E9E9E;
}

.browser-wireframe-url {
    width: 95%;
    position: relative;
    border: 1px solid #BDBDBD;
    height: 2em;
    margin: 0 auto;
    border-radius: 3px;
    top: 2em;
    box-sizing: border-box;
    text-align: left;
    background: #f0f2f3;
}

.browser-wireframe-url a {
    position: relative;
    color: #333;
    width: 100%;
    display: block;
    padding-left: .5em;
    padding-top: .2em;
    box-sizing: border-box;
}

.browser-wireframe-content {
    position: relative;
    top: 2.9em;
    padding-bottom: 2.6em;
}

.browser-wireframe-content video {
    width: 100%;
}

.three-column-img {
    width: 5em;
    height: 4.5em;
}

#mobile-wireframe {
    position: relative;
    display: none;
    margin: 0 auto;
    background: #fcfcfc;
    padding: 3.5em .75em;
    border-radius: 35px;
    width: 80%;
    border: 1px solid #E0E0E0;
    box-shadow: 0 0 0 5px #E0E0E0;
    z-index: 50;
}

#mobile-display {
    display: block;
}

#mobile-display img {
    border: 2px solid #333333;
}

#mobile-speaker {
    position: absolute;
    height: .4em;
    width: 5em;
    border-radius: 20px;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 1.5em;
}

#mobile-camera {
    position: absolute;
    height: .5em;
    width: .5em;
    border-radius: 50%;
    top: 0;
    left: 30%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 1.5em;
}

#mobile-volume-up {
    position: absolute;
    height: 3.5em;
    width: .2em;
    background: inherit;
    left: -0.6em;
    top: 3.5em;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#mobile-volume-down {
    position: absolute;
    height: 3.5em;
    width: .2em;
    background: inherit;
    left: -0.6em;
    top: 7.5em;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#mobile-power {
    position: absolute;
    height: 3.5em;
    width: .2em;
    background: inherit;
    right: -0.6em;
    top: 3.5em;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#mobile-home {
    position: absolute;
    height: 1.75em;
    width: 1.75em;
    background: inherit;
    left: 50%;
    bottom: 1.5em;
    background: none;
    border: 3px solid #BDBDBD;
    border-radius: 9px;
    -webkit-transform: translateX(-50%) translateY(25%);
    -moz-transform: translateX(-50%) translateY(25%);
    -ms-transform: translateX(-50%) translateY(25%);
    -o-transform: translateX(-50%) translateY(25%);
    transform: translateX(-50%) translateY(25%);
}

#mobile-volume-up,
#mobile-volume-down,
#mobile-power {
    border: 1px solid #E0E0E0;
}

#mobile-speaker,
#mobile-camera {
    background: #BDBDBD;
}

input[type="submit"],
input[type="file"]::before,
.button {
    display: inline-block;
    position: relative;
    content: 'Choose File';
    z-index: 20;
    padding: .65em 2em;
    background: #4285f4;
    border: none;
    color: #FFFFFF;
    box-sizing: border-box;
    margin: 0 .8em;
    margin-top: 1em;
    border-radius: 3px;
    -webkit-transition: 0.25s all;
    -moz-transition: 0.25s all;
    -ms-transition: 0.25s all;
    -o-transition: 0.25s all;
    transition: 0.25s all;
    overflow: hidden;
    font-weight: 400;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}

input[type="file"]::-webkit-file-upload-button {
    padding: .65em 2em;
    opacity: 0;
}

input[type="file"] {
    margin-top: 0;
}

input[type="file"]::before {
    position: absolute;
    margin: 0;
}

input[type="submit"]:focus,
input[type="submit"]:hover,
input[type="button"]:focus,
input[type="button"]:hover,
.button:focus,
.button:hover,
.fab:focus,
.fab:hover {
    cursor: pointer;
}

input[type="submit"]:active,
input[type="button"]:active,
.button:active,
.fab:active {
    outline: 0;
}

input[type="submit"]:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
    font-family: inherit;
    box-sizing: border-box;
    padding: .75em;
    border: #eeeeee 2px solid;
    width: 100%;
    font-size: 1em;
}

input[type="radio"] {
    opacity: 0;
    z-index: 100;
    position: relative;
}

input[type="radio"] + i {
    position: absolute;
    height: 1em;
    width: 1em;
    display: inline-block;
    opacity: 1;
    border-radius: 100%;
    border: 2px solid #5a5a5a;
    left: -0.2em;
}

input[type="radio"] + i::after {
    content: '';
    display: block;
    position: relative;
    background-image: url(../img/icons/ic_lens_48px.svg);
    background-repeat: no-repeat;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    height: .8em;
    width: .8em;
    opacity: 1;
    top: .12em;
    left: .075em;
    z-index: 90;
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -ms-transform: scale3d(0, 0, 0);
    -o-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    transition: .3s all;
}

.map-container input[type="radio"] + i::after {
    left: .11rem;
}

input[type="radio"]:checked + i {
    border: 2px solid #009688;
}

input[type="radio"]:checked + i::after {
    -webkit-animation: bloom 0.3s;
    -moz-animation: bloom 0.3s;
    -o-animation: bloom 0.3s;
    animation: bloom 0.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

input[type="checkbox"] {
    opacity: 0;
    z-index: 100;
    position: relative;
    display: inline-block;
    height: 1.25em;
    width: 1.25em;
    left: -0.25em;
}

input[type="checkbox"] + i {
    position: absolute;
    height: 1em;
    width: 1em;
    display: inline-block;
    opacity: 1;
    border-radius: 10%;
    border: 2px solid #5a5a5a;
    left: -0.2em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: .3s all;
}

input[type="checkbox"] + i::after {
    content: '';
    display: block;
    position: relative;
    background-image: url(../img/icons/ic_check_48px.svg);
    background-size: 110%;
    background-repeat: no-repeat;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    height: .8em;
    width: .8em;
    opacity: 1;
    top: .12em;
    left: .1em;
    z-index: 90;
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -ms-transform: scale3d(0, 0, 0);
    -o-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    transition: .3s all;
}

input[type="checkbox"]:checked + i {
    border: 2px solid #009688;
    background: #009688;
}

input[type="checkbox"]:checked + i::after {
    -webkit-animation: bloom 0.3s;
    -moz-animation: bloom 0.3s;
    -o-animation: bloom 0.3s;
    animation: bloom 0.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes bloom {
    0 {
        opacity: 0;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
        height: .8em;
        width: .8em;
    }
}

label {
    display: inline;
    margin: .3em 0;
    margin-left: .5em;
    text-align: left;
}

div.form-input label {
    border: none;
    cursor: initial;
    display: initial;
    padding: initial;
    position: absolute;
    color: #9b9b9b;
    margin-left: .75em;
    top: 1.0em;
    left: 0;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

div.form-input label.changed,
div.form-input label.no-float {
    -webkit-transform: translate3d(0, -2.5em, 0);
    -moz-transform: translate3d(0, -2.5em, 0);
    -ms-transform: translate3d(0, -2.5em, 0);
    -o-transform: translate3d(0, -2.5em, 0);
    transform: translate3d(0, -2.5em, 0);
    opacity: 1;
}

div.form-input input:focus,
div.form-input textarea:focus,
div.form-input select:focus {
    outline: 2px solid #23A1D1;
}

div.form-input input:focus + label,
div.form-input textarea:focus + label,
div.form-input select:focus + label {
    color: #23A1D1;
}

.small-form {
    width: 27em;
    margin: 0 auto;
    text-align: center;
}

.form-input {
    display: block;
    margin: 1.75em 0;
    position: relative;
}

.form-input div {
    display: inline-block;
}

.form-item {
    margin-bottom: 1em;
    display: block;
    position: relative;
}

.form-input .validator,
.form-item .validator {
    position: absolute;
    right: .75em;
    top: 0.75em;
}

.form-input.checkbox,
.form-item.checkbox {
    display: inline-block;
}

.form-buttons {
    display: block;
    text-align: left;
}

.form-buttons.right {
    text-align: right;
}

.form-buttons.center {
    text-align: center;
}

.form-alt-links a {
    margin: 0 .5em;
    display: inline-block;
}

.radio-group {
    display: inline-block;
    margin: 0 1em;
    position: relative;
}

.radio-group span {
    padding: 0 .4em;
}

.button.basic {
    background: none;
    color: #333;
}

input[type="file"].hollow::before {
    background: none;
    color: #333;
}

input[type="file"].hollow:active::before,
input[type="file"].hollow:focus::before,
input[type="file"].hollow:hover::before {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.26);
}

input[type="file"].hollow::before {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.button.delete {
    color: #F44336;
}

.button.basic,
.button.delete {
    box-shadow: initial;
}

.button.basic:active,
.button.basic:focus,
.button.basic:hover {
    background: #eee;
}

.button.basic .ripple {
    background: #E0E0E0;
}

.fab.disabled,
.button.disabled {
    background: #eaeaea;
    color: #a8a8a8;
}

.failed {
    background: #323232;
}

.success {
    background: #323232;
}

.warning {
    background: #323232;
}

.notification {
    background: #323232;
    font-size: .9em;
    min-width: 288px;
    max-width: 568px;
    max-height: 48px;
    position: fixed;
    bottom: 3em;
    left: 3em;
    border-radius: 2px;
    color: #FFFFFF;
    box-sizing: border-box;
    padding: .9em 1.5em;
    text-align: center;
    z-index: 99999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}

.notification.animate-out {
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.notification.animate-in,
.notification.animate-out {
    -webkit-animation-name: animScale;
    animation-name: animScale;
    -webkit-animation-duration: 0.25s;
    animation-duration: 0.25s;
    -webkit-animation-fill-mode: both;
}

@-webkit-keyframes animScale {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 40px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }
    @page {
        margin: 0.5cm;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}

.ui-loader {
    display: none;
}

.ui-mobile-viewport {
    margin: 0;
}

.marker-cluster-small {
    background-color: rgba(181, 226, 140, 0.6);
}

.marker-cluster-small div {
    background-color: rgba(110, 204, 57, 0.6);
}

.marker-cluster-medium {
    background-color: rgba(241, 211, 87, 0.6);
}

.marker-cluster-medium div {
    background-color: rgba(240, 194, 12, 0.6);
}

.marker-cluster-large {
    background-color: rgba(253, 156, 115, 0.6);
}

.marker-cluster-large div {
    background-color: rgba(241, 128, 23, 0.6);
}


/* IE 6-8 fallback colors */

.leaflet-oldie .marker-cluster-small {
    background-color: #b5e28c;
}

.leaflet-oldie .marker-cluster-small div {
    background-color: #6ecc39;
}

.leaflet-oldie .marker-cluster-medium {
    background-color: #f1d357;
}

.leaflet-oldie .marker-cluster-medium div {
    background-color: #f0c20c;
}

.leaflet-oldie .marker-cluster-large {
    background-color: #fd9c73;
}

.leaflet-oldie .marker-cluster-large div {
    background-color: #f18017;
}

.marker-cluster {
    background-clip: padding-box;
    border-radius: 20px;
}

.marker-cluster div {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
    border-radius: 15px;
    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.marker-cluster span {
    line-height: 30px;
}

.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
    -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
    -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
    -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
    transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.fixed-to-relative {
    position: relative !important;
}

div.map.mode-create {
    cursor: crosshair !important;
}

div.map g path {
    transition: all 0.25s;
    stroke-width: 4px;
    stroke-opacity: 1;
    position: absolute;
    z-index: 1001;
    fill-opacity: .75;
    -webkit-filter: none;
}

div.map.mode-delete path {
    cursor: no-drop !important;
}

div.map.mode-delete path:hover {
    fill: #4d4d4d !important;
}

div.map div.polygon-elbow {
    -webkit-transition: opacity .25s;
    box-shadow: 0 0 0 2px white, 0 0 10px rgba(0, 0, 0, 0.35);
    border: 5px solid #D7217E;
    border-radius: 10px;
    transition: opacity 0.25s;
    cursor: move;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
    width: 0 !important;
    height: 0 !important;
}

div.map div.polygon-elbow.non-polygon {
    opacity: 0 !important;
    pointer-events: none !important;
    border: 5px solid darkgray;
}

div.map.mode-edit div.polygon-elbow {
    opacity: 1;
    pointer-events: all;
}

div.map svg.tracer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2001;
    pointer-events: none;
}

.legend {
    background-color: #f4f4f4;
    line-height: 18px;
    color: #555;
    padding: 5%;
    display: block;
    min-width: 7.5rem;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.legend > div{
    white-space: nowrap;
    padding: .5rem 0;
}

.legend > div i, .legend > div p{
    display: inline;
}


.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
}

.leaflet-control-layers-list input{
    opacity: 1;
}